<template>
	<view class="my">
		<u-picker :show="show" :columns="types" @cancel="show = false" @confirm="confirm" @close="show=false"
			:closeOnClickOverlay="true" keyName="name"></u-picker>
		<view class="header" style="margin: 20rpx 0;">
			<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm" labelWidth='120'>
				<u-form-item label="分组" prop="usedtype_id">
					<view class="right" @click="show=true" :style="model.usedtype_id?'font-size:32rpx;color:black':''">
						{{model.usedtype_id?type:"请选择"}}
						<u-icon name="arrow-right" style="margin-left: 20rpx;"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="商品名称：" prop="name" borderBottom>
					<u--input v-model="model.name" border="none" placeholder="请输入商品名称" style="flex: 1;"></u--input>
				</u-form-item>
				<u-form-item label="价格：" prop="price" borderBottom>
					<u--input placeholder="请输入价格" border="none" style="flex: 1;" v-model="model.price"
						type="digit">></u--input>
				</u-form-item>
				<u-form-item label="封面图" borderBottom>
					<u-upload :fileList="fileList" name="1" :multiple="false" :maxCount="1" @afterRead="afterRead"
						@delete="deletePic"></u-upload>
				</u-form-item>
				<u-form-item label="详情图" borderBottom>
					<u-upload :fileList="fileList2" name="3" :multiple="false" :maxCount="3" @afterRead="afterRead2"
						@delete="deletePic2"></u-upload>
				</u-form-item>
				<u-form-item label="前左图" borderBottom>
					<u-upload :fileList="fileList_qz" name="1" :multiple="false" :maxCount="1" @afterRead="afterRead_qz"
						@delete="deletePic_qz"></u-upload>
				</u-form-item>
				<u-form-item label="前右图" borderBottom>
					<u-upload :fileList="fileList_qy" name="1" :multiple="false" :maxCount="1" @afterRead="afterRead_qy"
						@delete="deletePic_qy"></u-upload>
				</u-form-item>
				<u-form-item label="后左图" borderBottom>
					<u-upload :fileList="fileList_hz" name="1" :multiple="false" :maxCount="1" @afterRead="afterRead_hz"
						@delete="deletePic_hz"></u-upload>
				</u-form-item>
				<u-form-item label="后右图" borderBottom>
					<u-upload :fileList="fileList_hy" name="1" :multiple="false" :maxCount="1" @afterRead="afterRead_hy"
						@delete="deletePic_hy"></u-upload>
				</u-form-item>
				<u-form-item label="正前图" borderBottom>
					<u-upload :fileList="fileList_zq" name="1" :multiple="false" :maxCount="1" @afterRead="afterRead_zq"
						@delete="deletePic_zq"></u-upload>
				</u-form-item>
				<u-form-item label="正后图" borderBottom>
					<u-upload :fileList="fileList_zh" name="1" :multiple="false" :maxCount="1" @afterRead="afterRead_zh"
						@delete="deletePic_zh"></u-upload>
				</u-form-item>
				<u-form-item label="铭牌图" borderBottom>
					<u-upload :fileList="fileList_mp" name="1" :multiple="false" :maxCount="1" @afterRead="afterRead_mp"
						@delete="deletePic_mp()"></u-upload>
				</u-form-item>
			</u--form>
		</view>
		<view class="footer">
			<view class="btn" @click="submit">
				确认发布
			</view>
		</view>
	</view>
</template>

<script>
	// import {
	// 	createGoods,
	// 	getShop
	// } from "@/request2/api/goods.js"
	import {
		createUsed,
		getUsedType
	} from "@/request/api/goods.js"
	export default {
		data() {
			return {
				type: null,
				fileList: [],
				fileList2: [],

				fileList_qz: [],
				fileList_qy: [],
				fileList_hz: [],
				fileList_hy: [],
				fileList_zq: [],
				fileList_zh: [],
				fileList_mp: [],

				types: [],
				model: {
					usedtype_id: undefined,

					name: "",
					image: "",
					desc_image: "",
					price: "",

					qz_image: '',
					qy_image: '',
					hz_image: '',
					hy_image: '',
					zq_image: '',
					zh_image: '',
					mp_image: '',

				},
				rules: {
					'name': {
						required: true,
						message: '商品名称',
						trigger: ['blur', 'change']
					},
					'price': {
						required: true,
						message: '商品价格',
						trigger: ['blur', 'change']
					},
					'usedtype_id': {
						type: 'number',
						required: true,
						message: '商品分组',
						trigger: ['blur', 'change']
					},
				},
				show: false,
				info: {

				}
			}
		},

		onShow() {
			console.log(11111111)
			getUsedType().then(res => {
				this.types = [res.data];
			})
		},
		methods: {

			confirm(e) {
				this.model.usedtype_id = e.value[0].id;
				this.type = e.value[0].name;
				this.show = false
			},
			deletePic(e) {
				this.fileList.splice(e.index, 1)
			},
			async afterRead(e) {

				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				uni.uploadFile({
					url: 'https://ba.fuliaoxx.com/api/common/upload', // 接口url
					filePath: e.file.url,
					name: 'file',
					header: {
						"token": uni.getStorageSync('token') ? uni.getStorageSync('token') : ""
					}, // 请求头
					success: async (res) => {
						console.log(res)
						let json = JSON.parse(res.data)
						that.model.image = json.data.url;
						that.fileList = [{
							url: 'https://ba.fuliaoxx.com' + json.data
								.url,
							key: json.data
								.url
						}]
						uni.hideLoading()
					},
					complete(res) {
						console.log(res)
					}
				})
			},


			deletePic_qz(e) {
				this.fileList_qz.splice(e.index, 1)
			},
			async afterRead_qz(e) {
				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				uni.uploadFile({
					url: 'https://ba.fuliaoxx.com/api/common/upload', // 接口url
					filePath: e.file.url,
					name: 'file',
					header: {
						"token": uni.getStorageSync('token') ? uni.getStorageSync('token') : ""
					}, // 请求头
					success: async (res) => {
						let json = JSON.parse(res.data)
						that.model.qz_image = json.data.url;
						that.fileList_qz = [{
							url: 'https://ba.fuliaoxx.com' + json.data
								.url,
							key: json.data
								.url
						}]
						uni.hideLoading()
					},
				})
			},
			deletePic_qy(e) {
				this.fileList_qy.splice(e.index, 1)
			},
			async afterRead_qy(e) {
				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				uni.uploadFile({
					url: 'https://ba.fuliaoxx.com/api/common/upload', // 接口url
					filePath: e.file.url,
					name: 'file',
					header: {
						"token": uni.getStorageSync('token') ? uni.getStorageSync('token') : ""
					}, // 请求头
					success: async (res) => {
						let json = JSON.parse(res.data)
						that.model.qy_image = json.data.url;
						that.fileList_qy = [{
							url: 'https://ba.fuliaoxx.com' + json.data
								.url,
							key: json.data
								.url
						}]
						uni.hideLoading()
					},
				})
			},
			deletePic_hz(e) {
				this.fileList_hz.splice(e.index, 1)
			},
			async afterRead_hz(e) {
				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				uni.uploadFile({
					url: 'https://ba.fuliaoxx.com/api/common/upload', // 接口url
					filePath: e.file.url,
					name: 'file',
					header: {
						"token": uni.getStorageSync('token') ? uni.getStorageSync('token') : ""
					}, // 请求头
					success: async (res) => {
						let json = JSON.parse(res.data)
						that.model.hz_image = json.data.url;
						that.fileList_hz = [{
							url: 'https://ba.fuliaoxx.com' + json.data
								.url,
							key: json.data
								.url
						}]
						uni.hideLoading()
					},
				})
			},


			deletePic_hy(e) {
				this.fileList_hy.splice(e.index, 1)
			},
			async afterRead_hy(e) {
				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				uni.uploadFile({
					url: 'https://ba.fuliaoxx.com/api/common/upload', // 接口url
					filePath: e.file.url,
					name: 'file',
					header: {
						"token": uni.getStorageSync('token') ? uni.getStorageSync('token') : ""
					}, // 请求头
					success: async (res) => {
						let json = JSON.parse(res.data)
						that.model.hy_image = json.data.url;
						that.fileList_hy = [{
							url: 'https://ba.fuliaoxx.com' + json.data
								.url,
							key: json.data
								.url
						}]
						uni.hideLoading()
					},
				})
			},
			deletePic_zq(e) {
				this.fileList_zq.splice(e.index, 1)
			},
			async afterRead_zq(e) {
				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				uni.uploadFile({
					url: 'https://ba.fuliaoxx.com/api/common/upload', // 接口url
					filePath: e.file.url,
					name: 'file',
					header: {
						"token": uni.getStorageSync('token') ? uni.getStorageSync('token') : ""
					}, // 请求头
					success: async (res) => {
						let json = JSON.parse(res.data)
						that.model.zq_image = json.data.url;
						that.fileList_zq = [{
							url: 'https://ba.fuliaoxx.com' + json.data
								.url,
							key: json.data
								.url
						}]
						uni.hideLoading()
					},
				})
			},
			deletePic_zh(e) {
				this.fileList_zh.splice(e.index, 1)
			},
			async afterRead_zh(e) {
				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				uni.uploadFile({
					url: 'https://ba.fuliaoxx.com/api/common/upload', // 接口url
					filePath: e.file.url,
					name: 'file',
					header: {
						"token": uni.getStorageSync('token') ? uni.getStorageSync('token') : ""
					}, // 请求头
					success: async (res) => {
						let json = JSON.parse(res.data)
						that.model.zh_image = json.data.url;
						that.fileList_zh = [{
							url: 'https://ba.fuliaoxx.com' + json.data
								.url,
							key: json.data
								.url
						}]
						uni.hideLoading()
					},
				})
			},


			deletePic_mp(e) {
				this.fileList_mp.splice(e.index, 1)
			},
			async afterRead_mp(e) {
				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				uni.uploadFile({
					url: 'https://ba.fuliaoxx.com/api/common/upload', // 接口url
					filePath: e.file.url,
					name: 'file',
					header: {
						"token": uni.getStorageSync('token') ? uni.getStorageSync('token') : ""
					}, // 请求头
					success: async (res) => {
						let json = JSON.parse(res.data)
						that.model.mp_image = json.data.url;
						that.fileList_mp = [{
							url: 'https://ba.fuliaoxx.com' + json.data
								.url,
							key: json.data
								.url
						}]
						uni.hideLoading()
					},
				})
			},
























			deletePic2(e) {
				this.fileList2.splice(e.index, 1)
			},
			async afterRead2(e) {
				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				uni.uploadFile({
					url: 'https://ba.fuliaoxx.com/api/common/upload', // 接口url
					filePath: e.file.url,
					name: 'file',
					header: {
						"token": uni.getStorageSync('token') ? uni.getStorageSync('token') : ""
					}, // 请求头
					success: async (res) => {
						let json = JSON.parse(res.data)
						// that.model.image = json.data.url;
						that.fileList2 = [...that.fileList2, {
							url: 'https://ba.fuliaoxx.com' + json.data
								.url,
							key: json.data
								.url
						}]
						uni.hideLoading()
					},
				})
			},
			submit() {
				this.$refs.uForm.validate().then(async () => {
					if (this.fileList.length == 0 || this.fileList2.length == 0 || this.fileList_qz.length ==
						0 || this.fileList_qy.length == 0 || this.fileList_hz.length == 0 || this.fileList_hy
						.length == 0 || this.fileList_zh.length == 0 || this.fileList_zq.length == 0 || this
						.fileList_mp.length == 0) {
						uni.showToast({
							icon: "none",
							title: "请上传完整图片"
						})
						return
					}
					let json = JSON.parse(JSON.stringify(this.model))
					json['shop_id'] = this.info.id;
					json['image'] = this.fileList.map(item => item.key).join(',');
					json['desc_image'] = this.fileList2.map(item => item.key).join(',');
					json['qz_image'] = this.fileList_qz.map(item => item.key).join(',');
					json['qy_image'] = this.fileList_qy.map(item => item.key).join(',');
					json['hz_image'] = this.fileList_hz.map(item => item.key).join(',');
					json['hy_image'] = this.fileList_hy.map(item => item.key).join(',');
					json['zq_image'] = this.fileList_zq.map(item => item.key).join(',');
					json['zh_image'] = this.fileList_zh.map(item => item.key).join(',');
					json['mp_image'] = this.fileList_mp.map(item => item.key).join(',');
					let userInfo = uni.getStorageSync("userInfo")
					json['user_id'] = userInfo.id;
					let res = await createUsed(json);
					if (res.code == 1) {
						uni.navigateBack()
					}
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
</style>
<style scoped lang="scss">
	::v-deep.header {
		input {}

		.u-form-item__body__right__message {
			text-align: right;
		}

		.u-upload__button {
			display: flex;
			justify-content: center;
			background-color: #F8F8F8;
		}
	}

	.right {
		display: flex;
		align-items: center;
		// justify-content: flex-end;
		font-size: 28rpx;
		color: #888888;
		flex: 1;

		image {
			width: 14rpx;
			margin-left: 10rpx;
		}
	}

	.my {
		padding-bottom: 220rpx;

		.bg {
			position: fixed;
			width: 100%;
			background-color: #75D65E;
			height: 180rpx;
			top: 0;
		}

		.border {
			position: fixed;
			width: 100%;
			background-color: #F8F8F8;
			height: 80rpx;
			z-index: 1;
			border-radius: 50rpx 50rpx 0 0;
		}

		.header {
			position: relative;
			z-index: 1;
			margin: 30rpx;
			margin-top: 0;
			background-color: white;
			padding: 0 30rpx;
			border-radius: 30rpx;
			box-sizing: border-box;
			margin-bottom: 0;

			.line {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: calc(100% - 40rpx);
				padding: 30rpx 20rpx;

				.right {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #888888;

					image {
						width: 14rpx;
						margin-left: 10rpx;
					}
				}
			}

			.line2 {
				padding: 30rpx 20rpx;

				.title {
					font-size: 36rpx;
					margin-bottom: 24rpx;
					display: flex;
					align-items: center;

					.it {
						width: 8rpx;
						height: 30rpx;
						margin-right: 12rpx;
						background-color: #75D65E;
						border: 10rpx;
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: center;
			background-color: white;
			padding: 20rpx 0;
			z-index: 1;

			.btn {
				width: 90%;
				background-color: #75D65E;
				border-radius: 225rpx;
				text-align: center;
				padding: 30rpx 0;
				font-size: 30rpx;
				color: white;
			}
		}

	}
</style>